<template>
	<view class="orders">
		<view class="search">
			<form action="/">
			  <van-search
			    v-model="sear"
			    show-action
				:clearable="false"
			    placeholder="请输入就诊人姓名"
			    @search="onSearch"
			    @cancel="onCancel"
			  />
			</form>
		</view>
		<view class="order-wrap">
			<view class="order-item" v-for="v,i in patientList" :key="i">
				<van-swipe-cell>
					<view class="item">
						<view class="deparentment lh">
							<view>
								<text>科室: </text> <text>{{v.departmentName}}</text>
							</view>
							<view class="status" :style="{color:(v.status==0)? 'red':''}">{{v.endof}}</view>
						</view>
						<view class="clinic lh">
							<text>诊室: </text> <text>{{v.clinicName}}</text>
						</view>
						<view class="doctor lh">
							<text>医生: </text><text>{{v.doctorName}}</text>
						</view>
						<view class="patient lh">
							<text>就诊人: </text><text>{{v.patientName}}</text>
						</view>
						<view class="time lh">
							<text>预约时间: </text><text>{{v.bookingTime}}</text>
						</view>
					</view>
					<template #right >
						<van-button square text="删除" type="danger" class="delete-button" @click="ondelete(v)" />
					</template>
				</van-swipe-cell>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { showToast } from 'vant';
	import {ref,computed} from 'vue'
	let sear = ref('');
	import api from '../../lib/request.js'
	let status = ref('已结束')
	getList()
	// 所有就诊人数组信息
	let patientList = ref([])
	let oldList = []
		/*{
			patientName: '圈圈1', // 就诊人姓名
			doctorName: '杨景光医生', // 医生姓名
			departmentName: '骨科', //科室名称
			clinicName: '骨一科', // 门诊名称
			bookingTime: '2023-09-10 08:30', //预约时间
			status: 2, //订单状态 可以进行操作 过期; 可删除
			endof: '已结束', // 显示灰色
			id: '001' //订单id
		},*/
		
		// 根据就诊人姓名搜索订单
	const onSearch = () => {
		let val = sear.value
		let list = oldList
		let a = []
		list.forEach((item)=>{
			if(item.patientName.includes(val)){
				a.push(item)
			}
		})
		if(a.length){
			return 	patientList.value = a
		}
		patientList.value = []
	};
	// 点击搜索的取消
	const onCancel = ()=>{
		patientList.value= oldList
	}


	// 删除订单,根据status进行判断是否可以删除
	const ondelete = async (v)=>{
		let {status} = v
		switch (status){
			case 0:	 //预约成功  ,不可删除,需要先取消预约
				return showToast('待进行订单,请取消订单后删除')
			break;
			default: // 1,2 取消预约 或者 订单已结束
				let res = api.del(`user/register?id=${v.id}`)
			break;
		}
	}

	// 查看订单,并根据订单状态回显具体订单状态 
	 async function getList(){
			let a = await api.get('/user/register')
			let list = a.data
			list.forEach(item=>{
			switch (item.status){
					case 2: //订单状态 可以进行对订单进行操作 过期; 可删除
						item.endof =  '已结束'
					break;
					case 1:  //订单状态 可以进行操作 预约取消
						item.endof= '已取消'
					break;
					case 0: //订单状态 可以进行操作 预约成功    不可直接删除,需要先取消预约
						item.endof= '待进行'
					break;
			}
			patientList.value = list
			oldList = list
			})
	}

	
</script>

<style setup>
	.orders {
		width: 100vw;
		height: calc(100vh - 44px);
		overflow: scroll;
		background-color: #fafafa;
	}
	.item{
		padding:10px;
		box-sizing: border-box;
	}
	.order-item {
		/* border:1px solid #999; */
		/* border-radius: 10px; */
		margin-top: 10px;
		background-color: #fff;
	}

	.deparentment {
		display: flex;
		justify-content: space-between;
	}

	.lh {
		height: 23px;
		line-height: 23px;
	}

	.status {
		color: #999;
	}
	  .goods-card {
	    margin: 0;
	    background-color: @white;
	  }
	
	  .delete-button {
	    height: 100%;
	  }
</style>